<template>
  <div class="photoinfo-container">
    <h3>{{photoInfo.title}}</h3>
    <p class="subtitle">
      <span>发表时间：{{photoInfo.add_time | dateFormat}}</span>
      <span>点击：{{photoInfo.click}}次</span>
    </p>
    <hr />

    <!-- 图片缩略图 -->
    <div class="thumbs">
    <vue-preview :slides="slide1" @close="handleClose" ></vue-preview>
    </div>
    <!-- 图片展示区 -->
    <div class="content" v-html="photoInfo.content"></div>

    <!-- 评论区 -->
    <cmt-box :id="id"></cmt-box>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
//导入评论子组件
import Comment from "../subcomponents/comment.vue";

export default {
  data() {
    return {
      id: this.$route.params.id, //获取当前页面路由中的图片的ID
      photoInfo: {}, //存放图片信息
      slide1: [] //获取图片列表
    };
  },
  created() {
    this.getPhotoInfo();
    this.getThumimages();
  },
  methods: {
    getPhotoInfo() {
      // 获取图片详情
      this.$http.get("api/getimageInfo/" + this.id).then(result => {
        if (result.body.status === 0) {
          this.photoInfo = result.body.message[0];
        } else {
          Toast("获取图片信息失败！");
        }
      });
    },
    getThumimages() {
      this.$http
        .get("api/getthumimages/" + this.id)
        .then(result => {
          //循环每个图片数据,补全图片的宽和高
          result.body.message.forEach(item => {
            item.msrc = item.src;
            item.w = 600;
            item.h = 400;
          });
          this.slide1 = result.body.message;
        })
        .catch(error => {
          console.log(error);
          Toast({
            message: "获取缩略图图片失败..."
          });
        });
    },
    handleClose() {}
  },
  components: {
    "cmt-box": Comment
  }
};
</script>

<style lang="scss" >
.photoinfo-container{
    padding: 5px;
    h3{
        color: #26a2ff;
        font-size: 16px;
        text-align: center;
        margin: 15px  0;
    }
    .subtitle{
        display: flex;
        justify-content: space-between;
        font-size: 14px;
    }
    .content{
        font-size: 14px;
        line-height: 25px;
    }
    .thumbs {
       /deep/.my-gallery {
        display: flex;
        flex-wrap: wrap;
        figure {
        width: 30%;
        margin: 5px;
        img {
        width: 100%;
        box-shadow: 0 0 8px #999;
        border-radius: 5px;
      }
    }
  }
}
    
}
</style>